<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

import headerUtil from "./base/common/headerUtil.vue";
import reqApis from "../req/reqApis.js";
import {showToast} from 'vant';
import Utils from "../req/Utils";


const currentData = ref<any>({
  loginInfo: {
    type: 1,
    phone: "",
    code: "",
    password: "",
  },
  headerObj: {
    showType: 5,
  },
  showPwd: false

});

const isShow = () =>  {
  if(currentData.value.loginInfo.type ==1 && currentData.value.loginInfo.password.length>0) {
    return true;
  }

  if(currentData.value.loginInfo.type ==0 && currentData.value.loginInfo.code.length>0) {
    return true;
  }
  return false;
};
const loginFn = () => {
  let params = {
    phone: currentData.value.loginInfo.phone, 
    code: currentData.value.loginInfo.code, 
    type: currentData.value.loginInfo.type,
    password: currentData.value.loginInfo.password,
  }
  if(params.phone.length==0) {
    return showToast("手机号不能为空");
  }
  if(params.type == 1 && params.password.length == 0) {
    return showToast("密码不能为空");
  }
  if(params.type == 0 && params.code.length == 0) {
    return showToast("验证码不能为空");
  }

  reqApis.loginApi(params).then(res => {
    Utils.setToken(res.data.token)
      router.push({path: "/personal"});
  }).catch(err => {
    console.log(err);
  })
};
const sendLoginCodFn = () =>  {
  if(currentData.value.loginInfo.phone.length == 0) {
    return showToast("手机号不能为空");
  }
  reqApis.sendLoginCodeApi({phone: currentData.value.loginInfo.phone}).then((res:any) => {
    showToast(res.msg)
  }).catch(err => {
  })
};
const headerFn = (i:any) =>  {
  if(i==0) {
    history.back();
  }
};

</script>

<template>
  <section class="login">
    <headerUtil :obj="currentData.headerObj" @myClick="headerFn">用户登陆</headerUtil>
    <div class="content">
      <div class="label-item">
        <input class="input-text" v-model.trim="currentData.loginInfo.phone" placeholder="用户手机号" type="number">
        <div class="clear-icon" @click="currentData.loginInfo.phone = ''"></div>
      </div>
      <div class="label-item" v-if="currentData.loginInfo.type == 1">
        <input class="input-text w180" v-model.trim="currentData.loginInfo.password" placeholder="请输入密码" :type="currentData.showPwd?'text':'password'">
        <div class="clear-icon" @click="currentData.loginInfo.password = ''"></div>
        <div class="is-show" :class="{'show':currentData.showPwd, 'close': !currentData.showPwd}" @click="currentData.showPwd = !currentData.showPwd"></div>
        <div class="no-pass" @click="currentData.loginInfo.type = 0">忘记密码</div>
      </div>
      <div class="label-item" v-if="currentData.loginInfo.type == 0">
        <input class="input-text w180" v-model.trim="currentData.loginInfo.code" placeholder="请输入验证" type="text">
        <div class="clear-icon" @click="currentData.loginInfo.code = ''"></div>
        
        <div class="no-pass" @click="sendLoginCodFn()">发送验证码</div>
      </div>
      <div class="login-btn" :class="{'active': isShow()}" @click="loginFn()">登 陆</div>
      <div class="other-power">
        <div>
        <span v-if="currentData.loginInfo.type == 1" @click="currentData.loginInfo.type = 0">短信验证码登录</span>
        </div>
        <div>
        <span v-if="currentData.loginInfo.type == 0" @click="currentData.loginInfo.type = 1">账号密码登录</span>
        </div>
      </div>
      
    </div>
  </section>
</template>

<style lang="less" scoped>
  .login {
    width: 3.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    .content {
      flex: 1;
      background: white;
      padding: .3rem .25rem 0;
      box-sizing: border-box;
      .label-item {
        height: .5rem;
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: .3rem;
        &::after {
          width: 100%;
          height: 0;
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          border-bottom: .01rem solid #efefef;
        }
        .is-show {
          width: .24rem;
          height: .24rem;
          background-size: contain !important;
          margin-right: .15rem;
          &.show {
            background: url("../assets/images/show-icon-2.png") no-repeat center;
          }
          &.close {
            background: url("../assets/images/show-icon-1.png") no-repeat center;
          }
        }
        .no-pass {
          width: 1rem;
          height: .2rem;
          color: #222;
          font-size: .14rem;
          position: relative;
          display: flex;
          align-items: center;
          padding-left: .15rem;
          box-sizing: border-box;
          &::after {
            width: 0rem;
            height: 100%;
            content: "";
            border-left: .01rem solid #ccc;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        .input-text {
          height: .3rem;
          font-size: .14rem;
          color: #222;
          flex: 1;
          font-family: PingFangSC-Semibold;
          &.w180 {
            width: 1.8rem;
          }
          &::-webkit-input-placeholder{
            font-size: .14rem;
            color: #999;
          }
        }
        .clear-icon {
          width: .24rem;
          height: .24rem;
          background: url("../assets/images/clear-icon-1.png") no-repeat center;
          background-size: contain;
        }
      }
      .login-btn {
        width: 3.25rem;
        height: .5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: .25rem;
        font-size: .16rem;
        color: #fff;
        background-image: linear-gradient(90deg,#fab3b3,#ffbcb3 73%,#ffcaba);
        font-family: PingFangSC-Semibold;
        transition: all .4s;
        margin-bottom: .2rem;
        &.active {
          background-image: linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18);
        }
      }
      .other-power {
        display: flex;
        justify-content: space-between;
        margin-bottom: .88rem;
        span {
          color: #999;;
          font-size: .14rem;
        }
      }
      .entry-title {
        height: .27rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-bottom: .24rem;
        &::after {
          width: 100%;
          height: 0rem;
          content: "";
          border-top: .01rem solid #efefef;
          position: absolute;
          top: 50%;
          left: 0;
        }
        span {
          font-size: .12rem;
          color: #ccc;
          position: relative;
          z-index: 2;
          background: white;
          padding: 0 .1rem;
        }
      }
      .entry-wrap {
        display: flex;
        justify-content: center;
        .item {
          width: .48rem;
          .img-icon {
            width: .48rem;
            height: .48rem;
            background: url("../../assets/images/wechat-icon-1.png") no-repeat center;
            background-size: contain;
            margin-bottom: .06rem;
          }
          .text {
            color: #999;
            font-size: .12rem;
            text-align: center;
          }
        }
      }
    }
  }
</style>

